<template>
    <div class="demo"> 
        <h3>姓名：{{person.name}}</h3>
        <h3>年龄：{{person.age}},{{ag}}</h3>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button> 
        <hr/>
        <button @click="changeName2">修改名字</button>
        <button @click="changeAge2">修改年龄</button> 
    </div>
    
    <div class="demo2"> 
        <div>姓：<input name="first" v-model="firstName" /></div> 
        <div>名：<input name="last" v-model="lastName" /></div>
        <div>全名：{{fullName}}</div>
        <button @click="modifyName">修改名字</button>
    </div>

</template>
<!---
1.toRef 与  toRefs 区别
2.computed //计算属性
-->

<script lang="ts" setup>
    import {ref,reactive,toRefs,toRef,computed} from 'vue' //引入响应式拓展

    let person = reactive({
        name: "张三",
        age:18,
        tel: "12345678901"
    })

    function changeName() {
        person.name = "李四"
    }
    function changeAge(){
        person.age +=1
    }
    
    //toRefs:  将响应式对象中的所有属性变为ref对象
    let {name,age} = toRefs(person) 
    
    //toRef:  将响应式对象中的某一个属性变为ref对象
    let ag = toRef(person,"age")
    console.log(ag.value)
    function changeName2() {
        name.value += "*"
    }
    function changeAge2(){
        age.value +=2
    }
    /*************************************************/
    let firstName = ref('Foo')  
    let lastName = ref('Bar')
    
   /*  let fullName = computed(() => {
        return firstName.value + '-' + lastName.value
    }) */
    
    let fullName = computed({  //计算属性
        get(){
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
        },
        set(val){
            const names = val.split('-')
            firstName.value = names[0]
            lastName.value = names[1]
        }
        
    })
    
    function modifyName() {
        fullName.value = 'tony-ma'
    }

    /************************watch*****************************/
    


</script>

<style>
    .demo {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 400px;
        margin: 10px;
    }
    button  { 
        margin: 5px 5px;

    }

    .demo2 {
        background-color: pink;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 10px;
        width: 400px;
        margin: 10px;
    }
</style>